<template>
	<view class="assistant-box w100">
		<!-- 助教信息 -->
		<view class="assistant-info w100 flex-row-center">
			<view class="box">
				<view class="userinfo-box flex-row-center">
					<up-avatar shape="circle" :src="assistantInfo.avatar" mode="aspectFill" size="98rpx"></up-avatar>
					<view class="info-box flex">
						<text class="name">{{assistantInfo.nickname}}</text>
						<view class="info-lv" v-if="assistantInfo.levelName">
							<text class="tag">{{assistantInfo.levelName}}</text>
						</view>
					</view>
				</view>
				<view class="info-footer" @click="viewDetail(assistantInfo.introduce)">
					<text class="detail" v-if="assistantInfo.introduce">简介：{{assistantInfo.introduce}}</text>
				</view>
			</view>
			<view class="info-right flex">
				<view class="edit-info flex-row-center" @click="toEdit">
					<text class="text">个人信息</text>
					<up-icon name="arrow-right" color="#A5A6A7" size="28rpx"></up-icon>
				</view>
				<!-- 状态 -->
				<view class="status-box flex-center" v-if="assistantInfo">
					<text class="status ing">接单</text>
					<up-switch size="20" :activeValue="1" asyncChange :loading="switchLoading" :inactiveValue="0"
						v-model="assistantInfo.order_switch" activeColor="#60D4C1" @change="asyncChange"></up-switch>
				</view>
			</view>
		</view>
		<!-- 助教照片墙 -->
		<view class="photoWall-box w100">
			<view class="photoWall-title flex-row-center w100">
				<text class="title">助教照片墙</text>
				<view class="more flex-row-center" @click="toPhotoWall">
					<text class="text">更多</text>
					<up-icon name="arrow-right" color="#A5A6A7" size="28rpx"></up-icon>
				</view>
			</view>
			<view class="photoWall-content w100" v-if="photoWall&&photoWall.length>0">
				<swiper @change="changeItem" class="swiper w100" circular previous-margin="120rpx" next-margin="120rpx">
					<swiper-item v-for="(item,index) in photoWall" :key="item.id" class="swiper-item">
						<view @click="viewImg(item.url)"
							:class="[photoWallIndex==index?'photoWall_item':'photoWall_item_no','']">
							<image :src="item.url" class="photoWall_img" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="not-list-view" v-else>
				<text class="text">该助教暂时没有照片墙~</text>
			</view>
		</view>
		<!-- 设置 -->
		<view class="assistant-setting w100 flex-row-center">
			<view class="balance-box">
				<text class="name">余额：</text>
				<view class="price-box flex-row-center">
					<text class="price">{{accountInfo?.total}}</text>
					<view class="setting-btn flex-center" @click="toWithdraw()">
						<text class="text">去提现</text>
					</view>
				</view>
			</view>
			<view class="balance-box">
				<text class="name">收益：</text>
				<view class="price-box flex-row-center">
					<text class="price">{{accountInfo?.income_sum}}</text>
					<view class="setting-btn flex-center" @click="toLog(1)">
						<text class="text">去查看</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 订单中心 -->
		<view class="assistant-order w100">
			<text class="title">订单中心</text>
			<view class="order-item-box flex-row-center">
				<view class="order-item flex-center" @click="toOrder(index)" v-for="(item,index) in orderItem"
					:key="index">
					<view class="icon-box">
						<up-icon :name="item.icon" color="#E4E4E5" size="38rpx"></up-icon>
					</view>
					<text class="text">{{item.text}}</text>
				</view>
			</view>
		</view>
		<!-- 附加功能 -->
		<view class="assistant-function w100">
			<text class="title">附加功能</text>
			<view class="function-box w100">
				<view class="order-item flex-center" @click="toFunction(item)" v-for="(item,index) in functionList"
					:key="index">
					<view class="icon-box">
						<up-icon :name="item.icon" color="#E4E4E5" size="38rpx"></up-icon>
					</view>
					<text class="text">{{item.text}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed
	} from 'vue';
	const orderItem = [{
			icon: 'order',
			text: '待接单'
		},
		{
			icon: 'calendar',
			text: '待处理'
		}, {
			icon: 'error-circle',
			text: '已取消'
		},
		{
			icon: 'clock',
			text: '已开始'
		}, {
			icon: 'checkmark-circle',
			text: '已完成'
		}
	];
	const functionList = [{
		icon: 'order',
		url: '/page_assistant/views/assistantTimer',
		text: '时间管理'
	}, ]
	import {
		userInfoStore
	} from '@/stores/user';
	import {
		assistantStore
	} from '@/stores/assistant.js';
	const assistantInfoStore = assistantStore();
	const assistantInfo = ref(computed(() => assistantInfoStore.assistantInfo));
	const accountInfo = ref(computed(() => assistantInfoStore.accountInfo));
	const photoWall = ref([]);
	const photoWallIndex = ref(0);
	const {
		userInfo,
		level_info
	} = userInfoStore();
	const switchLoading = ref(false);
	onLoad(() => {
		getAssistantInfo();
		getAccount();
		getPhotoWall();
		let timeTips = uni.getStorageSync('assistant_timeTips'); //助教提示时间设置
		if (timeTips !== 'confirm') {
			uni.showModal({
				title: '提示',
				content: '您还没设置接单时间，设置接单时间方可接单？',
				success: function(res) {
					if (res.confirm) {
						uni.navigateTo({
							url:'/page_assistant/views/assistantTimer'
						})
						uni.setStorageSync('assistant_timeTips','confirm');
					} else if (res.cancel) {}
				}
			});
		}
	})
	onPullDownRefresh(async () => {
		await getAssistantInfo();
		await getPhotoWall();
		await getAccount();
		uni.stopPullDownRefresh();
	})
	const getAssistantInfo = async () => {
		const res = await $Api.assistant.getAssistantInfo();
		if (res.code == 1) {
			if (res.data.level && level_info?.value) {
				let info = level_info.value.find(item => item.vl_id == res.data.level)
				// console.log('info', info);
				if (info && info.vip_name) {
					res.data.levelName = info.vip_name + '助教'
				} else {
					res.data.levelName = '普通助教'
				}
			} else {
				res.data.levelName = '普通助教'
			}
			if (!res.data.introduce) {
				res.data.introduce = ''
			}
			assistantInfoStore.setAssistantInfo(res.data);
		} else {
			uni.$u.toast(res.msg);
		}
	};
	const getAccount = async () => {
		const res = await $Api.assistant.getAccount();
		if (res.code === 1) {
			assistantInfoStore.setAccount(res.data);
		} else {
			uni.$u.toast(res.msg);
		}
	}
	const getPhotoWall = async () => { //获取照片墙
		const res = await $Api.assistant.getPhotoWall();
		if (res.code == 1) {
			photoWall.value = res.data.list
		} else {
			uni.$u.toast(res.msg);
		}
	}
	const asyncChange = async (value) => { //切换接单状态
		switchLoading.value = true;
		const res = await $Api.assistant.setAssistantSwitch({
			status: value
		});
		switchLoading.value = false;
		if (res.code == 1) {
			assistantInfo.value.order_switch = value;
			uni.$u.toast(res.msg);
		} else {
			uni.$u.toast(res.msg);
		}
	}
	const changeItem = (e) => {
		photoWallIndex.value = e.detail.current;
	}
	const viewDetail = (text) => {
		if (!text) return;
		uni.showModal({
			title: '详情',
			content: text,
			showCancel: false
		})
	}
	const toPhotoWall = () => {
		uni.navigateTo({
			url: '/page_assistant/views/assistantPhoto'
		})
	}
	const toOrder = (index) => {
		uni.navigateTo({
			url: '/page_assistant/views/assistantOrder?index=' + index
		})
	}
	const toLog = (type) => {
		uni.navigateTo({
			url: '/page_assistant/views/assistantLog?type=' + type
		})
	};
	const toEdit = () => {
		uni.navigateTo({
			url: '/page_assistant/views/editAssistant'
		})
	};
	const toWithdraw = () => { //去提现
		uni.navigateTo({
			url: '/page_assistant/views/assistantWithdraw'
		})
	}
	const toFunction = (item) => {
		if (!item.url) return
		uni.navigateTo({
			url: item.url
		})
	}
	const viewImg = (img, index) => {
		uni.previewImage({
			urls: [img],
			longPressActions: {
				success: function(data) {},
				fail: function(err) {}
			}
		});
	}
</script>

<style lang="scss" scoped>
	view {
		// border: 1rpx solid red;
	}

	.assistant-box {
		padding: 36rpx 24rpx;

		.title {
			color: $name-color;
			font-size: 28rpx;
			font-weight: 600;
			margin-bottom: 24rpx;
			display: block;
		}
	}

	.assistant-info {
		margin-bottom: 24rpx;
		border-radius: 16rpx;
		padding: 20rpx;
		background: #222528;
		position: relative;
		justify-content: space-between;

		.info-right {
			flex-shrink: 0;
			flex-direction: column;
			height: 100%;
			justify-content: space-between;
			margin-left: 20rpx;

			.edit-info {
				margin-bottom: 24rpx;

				.text {
					color: $description-color;
					font-size: 28rpx;
					margin-right: 8rpx;
				}
			}
		}

		.status-box {
			// position: absolute;
			// top: 20rpx;
			// right: 20rpx;

			.status {
				font-size: 24rpx;
				margin-right: 10rpx;
			}

			.ing {
				color: #ff9900;
			}

			.no-start {
				color: #ff5d5d;
			}
		}

		.userinfo-box {
			.info-box {
				flex-direction: column;
				margin-left: 20rpx;

				.name {
					color: $name-color;
					font-size: 32rpx;
					font-weight: 600;
					margin-bottom: 10rpx;
				}

				.info-lv {
					.tag {
						background: #ff9900;
						color: #fff;
						padding: 4rpx 10rpx;
						border-radius: 8rpx;
						font-size: 24rpx;
					}
				}
			}
		}

		.info-footer {
			margin-top: 20rpx;

			.detail {
				color: $description-color;
				font-size: 28rpx;
				line-height: 32rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				word-break: break-all;
				-webkit-box-orient: vertical;
			}
		}
	}

	.photoWall-box {
		margin-bottom: 24rpx;
		border-radius: 16rpx;
		padding: 20rpx;
		background: #222528;

		.photoWall-title {
			justify-content: space-between;

			.more {
				color: $description-color;
				font-size: 28rpx;
				margin-right: 10rpx;
			}
		}

		.photoWall-content {
			margin-top: 20rpx;

			.swiper {
				height: 300rpx;
			}

			.swiper-item {
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.photoWall_item {
			transition: all .6s;
			width: 420rpx;
			height: 280rpx;
		}

		.photoWall_item_no {
			transition: all .6s;
			width: 320rpx;
			height: 200rpx;

		}

		.photoWall_img {
			width: 100%;
			height: 100%;
			border-radius: 16rpx;
		}
	}

	.assistant-setting {
		margin-bottom: 24rpx;
		border-radius: 16rpx;
		padding: 20rpx;
		background: #222528;
		justify-content: space-between;

		.balance-box {
			.name {
				color: $name-color;
				font-size: 28rpx;
			}

			.price-box {
				margin-top: 32rpx;

				.price {
					color: $price-color;
					font-size: 32rpx;
					font-weight: 600;
					margin-right: 20rpx;
				}

				.setting-btn {
					width: 120rpx;
					height: 42rpx;
					border-radius: 24rpx;
					background: $btn-bg-color;

					.text {
						color: $btn-text-color;
						font-size: 24rpx;
					}
				}
			}
		}
	}

	.assistant-order {
		margin-bottom: 24rpx;
		border-radius: 16rpx;
		padding: 20rpx;
		background: #222528;

		.order-item-box {
			justify-content: space-between;

			.order-item {
				width: 120rpx;
				height: 120rpx;
				border-radius: 16rpx;
				flex-direction: column;

				.icon-box {
					width: 68rpx;
					height: 68rpx;
					border-radius: 50%;
					flex-shrink: 0;
					background: $no-active-color;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.text {
					color: $name-color;
					font-size: 28rpx;
					margin-top: 10rpx;
				}
			}
		}
	}

	.assistant-function {
		border-radius: 16rpx;
		background: #222528;
		padding: 20rpx;

		.function-box {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			row-gap: 42rpx;

			.order-item {
				width: 120rpx;
				height: 120rpx;
				border-radius: 16rpx;
				flex-direction: column;

				.icon-box {
					width: 68rpx;
					height: 68rpx;
					border-radius: 50%;
					flex-shrink: 0;
					background: $no-active-color;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.text {
					color: $name-color;
					font-size: 28rpx;
					margin-top: 10rpx;
				}
			}
		}
	}
</style>